const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HTMLPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const isDev = process.env.NODE_ENV === 'development';

const config = {
    entry: path.join(__dirname, '../../src/vue/project/todo/index.js'), // 入口文件 用path.join(__dirname, 'src/index.js')将路径拼接为绝对路径
    output: {
        filename: 'bundle.js', // 文件输出
        path: path.join(__dirname, '../../dist/vue')
    },
    plugins: [
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin({
            template:path.resolve(__dirname,'../../project/todo/index.html')//查找模板文件
        }) // 处理html模版
    ],
    module: {
        rules: [
            {
                test:/\.js$/i,
                use:{
                    loader:'babel-loader?cacheDirectory',// 缓存每次的解析结果 加载更快
                    options:{
                        presets:[
                            '@babel/preset-env','@babel/preset-react'
                        ],
                        plugins: [
                            "react-hot-loader/babel",
                            "@babel/plugin-proposal-class-properties"
                        ]
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader' // 处理以.vue结尾的文件
            },
            {
                test:/\.(css|less)$/i,
                use:['style-loader','css-loader', 'less-loader']
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/, // 处理图片文件
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    devtool: 'cheap-module-source-map',
    resolve: {
        alias: {
          "@vue": path.resolve(__dirname, '../../src/vue/'),
          "@vuetodo": path.resolve(__dirname, '../../src/vue/project/todo'),
          "@static": path.resolve(__dirname, '../../static/css/'),
          "@project": path.resolve(__dirname, '../../project'),
          "@libs": path.resolve(__dirname, '../../libs'),
          "@store": path.resolve(__dirname, '../../store')
        }
    }
}
if(isDev){
    config.devtool = '#cheap-module-eval-source-map' // 调试代码时可以看到自己原本的代码，而不是编译后的
    config.devServer = {
        port: 8000,
        host: '0.0.0.0',
        overlay: {
            errors: true // 将webpack编译的错误显示在网页上面
        },
        open: true // 在启用webpack-dev-server时，自动打开浏览器
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    )
}
module.exports = config;